<script setup lang="ts">
import { RouterView } from 'vue-router'
import Notification from './components/Notification.vue'
import NavigationBar from './components/NavigationBar.vue'
import { ref } from 'vue'

const notificationRef = ref<InstanceType<typeof Notification> | null>(null)

// 暴露通知方法给全局使用
const showNotification = (message: string, type: 'success' | 'error' | 'warning' | 'info' = 'success') => {
  notificationRef.value?.addNotification(message, type)
}

// 将方法挂载到window对象上，方便其他组件调用
window.showNotification = showNotification
</script>

<template>
  <div class="app-container">
    <NavigationBar />
    <Notification ref="notificationRef" />
    <RouterView />
  </div>
</template>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: var(--neo-brutalist-gray);
}
</style>